function init() {
    const $about = $('#section-about');
    const $aboutNavs = $('li', $about);
    const aboutSwiper = new Swiper('#swiper-about', {
        loop: true,
        effect: 'coverflow',
        slidesPerView: 'auto',
        centeredSlides: true,
        allowTouchMove: false,
        coverflowEffect: {
            rotate: 0,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows: true
        },
        pagination: {
            el: '.swiper-pagination',
            renderBullet: (current, className) => {
                return `<span class="${className}"></span>`;
            }
        }
    });

    $about.on('click', '.header-nav li', function() {
        const $el = $(this);
        aboutSwiper.slideToLoop($el.data('index'));
        $aboutNavs.removeClass('active');
        $el.addClass('active');
    });
}

export default init;
